<template>
  <div class="instructions_box">
    <div class="instructions_header">
      <router-link tag="i" to="/introduction" class=" ">
        <i class="el-icon-arrow-left"></i>
      </router-link>
      <span>快速指南</span>
    </div>
    <div class="instructions_content">
      <!-- @/assets/njrpic/service.png -->
      <mt-swipe :auto="0">
        <mt-swipe-item>
          <img src="@/assets/yjpic/instructions0.jpg" alt="" />
        </mt-swipe-item>
        <mt-swipe-item
          ><img src="@/assets/yjpic/instructions01.jpg" alt=""
        /></mt-swipe-item>
        <mt-swipe-item
          ><img src="@/assets/yjpic/instructions02.jpg" alt=""
        /></mt-swipe-item>
        <mt-swipe-item
          ><img src="@/assets/yjpic/instructions03.jpg" alt=""
        /></mt-swipe-item>
        <mt-swipe-item
          ><img src="@/assets/yjpic/instructions04.jpg" alt=""
        /></mt-swipe-item>
        <mt-swipe-item
          ><img src="@/assets/yjpic/instructions05.jpg" alt=""
        /></mt-swipe-item>
        <mt-swipe-item
          ><img src="@/assets/yjpic/instructions06.jpg" alt=""
        /></mt-swipe-item>
        <mt-swipe-item
          ><img src="@/assets/yjpic/instructions07.jpg" alt=""
        /></mt-swipe-item>
        <mt-swipe-item
          ><img src="@/assets/yjpic/instructions08.jpg" alt=""
        /></mt-swipe-item>
      </mt-swipe>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.instructions_box {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  height: 100vh;
  .instructions_header {
    background-color: #ffffff;
    display: flex;
    height: 5%;
    padding: 25px;
    align-items: center;
    border-bottom: 2px solid rgba(207, 202, 197, 0.959);
    i {
      font-size: xx-large;
    }
    span {
      font-size: 36px;
      display: block;
      width: 100%;
      text-align: center;
    }
  }
  .instructions_content {
    display: flex;
    height: 95%;
    width: 100%;
    /deep/.mint-swipe {
    width: 100%;
}

/deep/.mint-swipe-indicators {
    bottom: 0.83333rem !important;
}

/deep/.mint-swipe-indicator {
    width: 0.24667rem !important;
    height: 0.24667rem !important;
    background: #000 !important;
    opacity: 0.6 !important;
    margin: 0 0.1rem !important;
}

/deep/.mint-swipe-indicator.is-active {
    background: #1b7de4 !important;
}
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
